<template>
  <div class="details-box">
      <router-view></router-view>
      <div class="content" ref="content">
        
      </div>
    <Navbbar></Navbbar>
      
  </div>
</template>

<script>    

    import Navbbar from '../components/Navbbar.vue';

  export default {
        name:'Details',
        data() {
    return {
        text:[],
        id:'',
        };
    },
    components:{
        Navbbar,
    },

    created() {

      this.id = this.$route.params.id;
     
      this.getStory(this.id);

    },


    methods: {
        // 获取最新的日报内容
        getStory(id){
            this.axios({

                params: {
                   id
                },
    

                // 请求类型
                method:'get',
                // 请求路径 详情内容
                 url: 'https://apis.netstart.cn/zhihudaily/story/'+this.id,
            }).then(result =>{
                
                this.text = result.data.story;
                // 将请求数据中的body构造导入页面
                this.$refs.content.innerHTML = this.text.body
                // 将数据中的css网址引入样式
                let Link= document.createElement('link');
                Link.href=this.text.css[0];
                Link.rel = 'stylesheet';
                document.querySelector('head').appendChild(Link)
                // 将详情头部的图片插入数据中的盒子中
                let Img = document.createElement('img');
                Img.src = this.text.image;
                document.querySelector('.headline .img-place-holder').appendChild(Img)
                // 将详情头部图片里的标题插入盒子中
                let Title = document.createElement('div');
                Title.innerHTML = this.text.title
                Title.className = "img-title"
                 document.querySelector('.headline .img-place-holder').appendChild(Title)

            }).catch(err =>{
               
            })
        }



  },


}
</script>

<style lang="less" >
   .content{
       img {
            width: 100%;
            height: 100%;
            display: inline-block !important;
            margin: 0px !important;
        }
        .img-title{
            color: white;
            width: 330px;
            font-size: 22px;
             text-overflow: ellipsis;
            display: -webkit-box; 
            -webkit-box-orient: vertical; 
            -webkit-line-clamp: 2; 
            overflow: hidden;
            position: absolute;
            bottom: 10%;
            left: 5%;
        }

       .headline .img-place-holder {
           position: relative;
            height: 325px;
        }
      
   }
    
    

</style>
